// 参数控制组件
// src/components/ParameterControls.tsx

// 导入 React 和状态管理函数
import React, { useState/*, useEffect*/ } from 'react';
// 从 Chakra UI 库导入所需的UI组件
import {
  Box,
  Slider,// 滑动条组件
  SliderTrack,  SliderFilledTrack,  SliderThumb, // 滑动条轨道和手柄组件
  // NumberInput,  NumberInputField,  NumberInputStepper,  NumberIncrementStepper,  NumberDecrementStepper, // 数字输入组件
  Select,
  FormControl,
  FormLabel,
  Switch,
  VStack,
  Heading,
  Text,
  // Progress,
  Tooltip // 其他表单相关组件
} from '@chakra-ui/react';

// 导入像素化处理相关的类型定义和预设调色板
import { type PixelationParams, PRESET_PALETTES, type Palette } from '../utils/pixelator';

// 定义组件属性接口
interface ParameterControlsProps {
  params: PixelationParams; // 当前的像素化参数
  selectedPalette?: Palette; // 当前所选的调色板（可选）
  onParamsChange: (params: PixelationParams) => void; // 参数改变时的回调函数
  onPaletteChange: (palette?: Palette) => void; // 调色板改变时的回调函数
}

// 实现组件
export const ParameterControls: React.FC<ParameterControlsProps> = ({
  params,
  selectedPalette,
  onParamsChange,
  onPaletteChange
}) => {
  // 状态：是否显示预览提示
  const [showPreviewHint, setShowPreviewHint] = useState(false);

  // 处理参数变化的函数
  const handleParamChange = (key: keyof PixelationParams, value: number | boolean) => {
    // 更新参数并通过回调函数通知父组件
    onParamsChange({ ...params, [key]: value });

    // 显示预览提示
    setShowPreviewHint(true);
    // 设置定时器，2秒后隐藏提示
    setTimeout(() => setShowPreviewHint(false), 2000);
  };

  // 处理调色板选择变化的函数
  const handlePaletteChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    // 根据选择的调色板名称查找对应的调色板对象
    const paletteName = event.target.value;
    const palette = paletteName ? PRESET_PALETTES.find(p => p.name === paletteName) : undefined;
    // 通知父组件调色板已改变
    onPaletteChange(palette);
  };

return (
    <Box p={4} bg="gray.50" borderRadius="md"> {/* 容器样式 */}
      <Heading size="md" mb={4}>处理参数</Heading> {/* 标题 */}

      {/* 垂直堆叠布局，每个控件间隔为4 */}
      <VStack spacing={4} align="stretch">
        {/* 像素大小控制 */}
        <FormControl>
          <FormLabel>
            像素大小: {params.pixelSize}px
            {/* 如果正在显示预览提示，则显示额外信息 */}
            {showPreviewHint && (
              <Text as="span" fontSize="sm" color="blue.500" ml={2}>
                (实时预览中...)
              </Text>
            )}
          </FormLabel>
          {/* 工具提示，提供关于此设置的帮助信息 */}
          <Tooltip label={`像素块大小，值越大像素化效果越明显`} placement="top" hasArrow>
            <Slider min={1} max={20} value={params.pixelSize} onChange={(value) => handleParamChange('pixelSize', value)}>
              <SliderTrack bg="gray.200"><SliderFilledTrack bg="blue.500" /></SliderTrack>
              <SliderThumb boxSize={6} />
            </Slider>
          </Tooltip>
        </FormControl>

        {/* 颜色深度控制 */}
        <FormControl>
          <FormLabel>
            颜色深度: {params.colorDepth}-bit
            {showPreviewHint && (
              <Text as="span" fontSize="sm" color="blue.500" ml={2}>
                (实时预览中...)
              </Text>
            )}
          </FormLabel>
          <Tooltip label={`颜色数量限制，值越小颜色越少，复古感越强`} placement="top" hasArrow>
            <Slider min={1} max={8} value={params.colorDepth} onChange={(value) => handleParamChange('colorDepth', value)}>
              <SliderTrack bg="gray.200"><SliderFilledTrack bg="green.500" /></SliderTrack>
              <SliderThumb boxSize={6} />
            </Slider>
          </Tooltip>
        </FormControl>

        {/* 抖动效果启用/禁用控制 */}
        <FormControl display="flex" alignItems="center">
          <Tooltip label={`启用颜色抖动，可以产生更自然的过渡效果`} placement="top" hasArrow>
            <FormLabel mb="0" cursor="help">启用抖动效果</FormLabel>
          </Tooltip>
          <Switch isChecked={params.useDithering} onChange={(e) => handleParamChange('useDithering', e.target.checked)} colorScheme="purple" />
        </FormControl>

        {/* 调色板选择控制 */}
        <FormControl>
          <FormLabel>预设调色板</FormLabel>
          <Tooltip label={`选择预设的颜色方案来创建特定风格的像素艺术`} placement="top" hasArrow>
            <Select placeholder="选择调色板（可选）" value={selectedPalette?.name || ''} onChange={handlePaletteChange}>
              {/* 循环渲染所有预设调色板选项 */}
              {PRESET_PALETTES.map(palette => (
                <option key={palette.name} value={palette.name}>{palette.name}</option>
              ))}
            </Select>
          </Tooltip>
        </FormControl>
      </VStack>
    </Box>
  );
};
